<template>
  <view class="containner">
    <u-navbar
      height="50"
      title="申请退款"
      title-size="36"
      back-icon-color="#333"
      title-color="#333"
    ></u-navbar>
    <view class="from">
      <u-cell-group>
        <!-- #ifdef MP-WEIXIN -->
        <u-cell-item
          @click="showWay = true"
          title="申请类型"
          :value="form.way ? getWayText(form.way) : '请选择'"
        ></u-cell-item>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <u-cell-item
          @click="showWay = true"
          title="申请类型"
          :value="form.way ? (() => (form.way == 10 ? ' 仅退款 ' : '退货退款'))() : '请选择'"
        ></u-cell-item>
        <!-- #endif -->
        <u-cell-item
          @click="show = !show"
          title="申请原因"
          :value="typeEleven ? typeEleven.name : '请选择'"
        ></u-cell-item>
        <!-- <u-cell-item title="退货件数" :arrow="false">
          <u-number-box v-model="form.refund_product_count"></u-number-box>
        </u-cell-item> -->
      </u-cell-group>
      <u-cell-group>
        <u-cell-item title="退款金额" :arrow="false">
          <view style="display: flex; align-items: baseline; justify-content: flex-end">
            <view style="width: 120rpx" class="text_right">
              <u-input v-model="refundPrice" :placeholder="place" :clearable="true" />
            </view>
            <text
              style="padding: 20rpx; color: #0f76bb"
              @click="refundPrice = (orderInfo.payPrice * 0.01).toFixed(2)"
              >全部</text
            >
          </view>
        </u-cell-item>
      </u-cell-group>

      <view class="info-view">
        <view style=""> 退货说明 </view>
        <view style="border: 1px solid #efefef; padding: 20rpx; margin: 10rpx 0">
          <textarea v-model="form.applyDescription" :rows="6"></textarea>
        </view>
        <u-upload ref="uUpload" :action="uploadURL"></u-upload>
      </view>
    </view>
    <!-- 	<view class="item-view">
    联系电话 &nbsp;&nbsp;&nbsp;&nbsp;13800138000
  </view> -->
    <view class="submit_the_module">
      <view @click="submit">确认提交</view>
    </view>
    <u-picker
      @confirm="confirm"
      :range="Ranges"
      mode="selector"
      range-key="name"
      v-model="show"
    ></u-picker>
    <u-toast ref="uToast" />
    <u-popup
      v-model="showWay"
      mode="center"
      width="620"
      height="auto"
      border-radius="20"
      closeable
      :mask-close-able="false"
    >
      <view class="way-wapper">
        <view class="way-list">
          <view
            class="way-item"
            @click="form.way = way.value"
            :class="form.way == way.value ? 'checked' : ''"
            v-for="(way, index) in wayItems"
            :key="index"
          >
            <text class="">{{ way.title }}</text>
          </view>
        </view>

        <view class="way-bt" @click="checkWay">确认选择</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { BASE_URL, UP_URL } from '@/common/config.js'

export default {
  data() {
    return {
      show: false,
      // TODO 后续完善，从接口获取
      Ranges: [
        {
          name: '货物质量问题',
          value: 1
        },
        {
          name: '货物缺损',
          value: 2
        },
        {
          name: '不想要',
          value: 3
        },
        {
          name: '拍错/多拍',
          value: 4
        },
        {
          name: '其他',
          value: 99
        }
      ],
      typeEleven: '',
      uploadURL: BASE_URL + UP_URL,
      goodsJson: '',
      orderInfo: {},
      refundPrice: '',
      form: {
        orderItemId: '',
        way: 0,
        refund_product_count: 1, //退款商品数量
        refundPrice: '', //退款金额
        applyReason: '',
        applyPicUrls: [],
        applyDescription: ''
      },
      place: '申请金额',
      showWay: false,
      wayItems: [
        {
          title: '仅退款',
          value: 10
        }
      ]
    }
  },
  computed: {
    getWayText() {
      return (way) => {
        const wayMap = {
          10: '仅退款',
          20: '退货退款'
        }
        return wayMap[way] || '未知类型'
      }
    }
  },
  onLoad(e) {
    this.form.orderId = e.id
    this.form.way = e.way ? e.way : 0
    // this.goodsJson = e.goodsJson
    this.initData()
  },
  methods: {
    initData() {
      let self = this
      self.$u.api
        .getOrderDetail({
          id: this.form.orderId
        })
        .then((res) => {
          self.orderInfo = res.data
          self.place = '≤' + (self.orderInfo.payPrice * 0.01).toFixed(2) + '元'
          self.goodsJson = JSON.stringify(res.data.items)
          if (self.orderInfo.deliveryType != 4) {
            self.wayItems.push({
              title: '退货退款',
              value: 20
            })
          }
          self.form.refund_product_count = self.orderInfo.productCount
        })
    },
    confirm(row) {
      this.typeEleven = this.Ranges[row]
      this.form.applyReason = this.Ranges[row].name
    },

    selectAFunction(value) {
      this.show = true
    },
    submit() {
      this.$refs.uUpload.lists.forEach((val) => {
        this.form.applyPicUrls.push(val.response.data)
      })

      if (!this.form.way) {
        this.$refs.uToast.show({
          title: '申请退款类型不能为空'
        })
        return
      }
      if (!this.refundPrice) {
        this.$refs.uToast.show({
          title: '退款金额不能为空'
        })
        return
      }

      if (!this.form.applyReason) {
        this.$refs.uToast.show({
          title: '退款描述不能为空'
        })
        return
      }
      this.form.refundPrice = this.refundPrice * 100
      this.$u.post('/app-api/trade/after-sale/create', this.form).then((res) => {
        if (res.code === 0) {
          this.$u.toast('申请成功')
          setTimeout(() => {
            uni.redirectTo({
              url: '/goods/order-list/order-list?index=0'
            })
          }, 800)
        } else {
          this.$u.toast(res.msg)
        }
      })
    },
    checkWay() {
      if (!this.form.way) {
        this.$u.toast('请选择申请类型')
        return
      }
      this.showWay = false
    },
    routeTo() {
      uni.redirectTo({
        url:
          '/other/after-sales-type/after-sales-type?id=' +
          this.form.orderId +
          '&goodsJson=' +
          this.goodsJson
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  margin-top: 80rpx;

  view {
    width: 710rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    background-color: #10a28f;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

.from {
  padding: 20rpx;
}

.text_right {
  font-size: 28rpx;

  input {
    font-size: 28rpx;
  }
}

textarea {
  font-size: 28rpx;
  padding: 20rpx 0;
}

.info-view {
  background-color: #fff;
  font-size: 28rpx;
  color: #606266;
  padding: 28rpx;
}

.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}

.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;

    text {
      color: #2d93fd;
    }
  }
}

.item-view {
  padding: 20rpx;
  font-size: 30rpx;
  background-color: #fff;
}

.way-wapper {
  padding: 30rpx 20rpx;

  .way-list {
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;

    .way-item {
      width: 40%;
      text-align: center;
      // border: 1rpx solid #efefef;
      padding: 40rpx;
      border-radius: 20rpx;
      background-color: #efefef;
    }

    .checked {
      background-color: #10a28f;
      color: #fff;
    }
  }

  .way-bt {
    width: 80%;
    margin: 0 auto;
    margin-top: 80rpx;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background-color: #10a28f;
    color: #f1f1f1;
    font-size: 15px;
    text-align: center;
  }
}
</style>
